<template>
  <section class="activity-explain-box knife_container">
    <div class="activity-progress-box">
      <activityTask :myAccount="0"></activityTask>
    </div>
    
  </section>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import activityTask from './components/activityTask'
export default {
  components: {
    activityTask
  },
  data () {
    return {
      level: 0,
      disocuntlist: [
        {'discount': 3, amount: 0},
        {'discount': 2, amount: 1000},
        {'discount': 4, amount: 10000},
        {'discount': 5, amount: 50000}
      ]
    }
  },
  computed: {
    ...mapState(['user']),
    ...mapGetters(['loginStatus']),
    personDot () {
      if (this.user && this.user.discount) {
        return 100 - this.user.discount * 100
      }
      return null
    },
    barWidth () {
      if (this.loginStatus !== 1) return
      // this.nowAmount = this.discountActivity.amount
      // let leftProgress
      this.disocuntlist.forEach((item, idx) => {
        if (item.discount === this.personDot) {
          this.level = idx
        }
      })
      return (25 * this.level) + '%'
    }
  }
}
</script>

<style lang="scss" scoped>
  .activity-explain-box{

    background: white;
  }
  .activity-progress-box{
    width: 1020px;
    color: white;
    // margin: 0 auto;
    margin: 10px auto 0;
    position: relative;
  }
  .activity-arrow{
    transform: rotate(90deg);
    right: 10px;
    position: absolute;
    top: -20px;
    color: #d8d8d8;
    font-size: 20px;
    cursor: pointer;
  }
    .procurement_progress{
    position: relative;
    margin-bottom: 28px;
    // height: 90px;
    .progress_tag{
      position: relative;
      // height: 90px;
      padding-top: 28px;
      line-height: 25px;
      .dot{
        position:absolute;
        display: inline-block;
        margin-left: -10px;
        text-align: center;
        &:nth-child(1){
          left: 1%;
        }
        &:nth-child(2){
          left: 24.5%;
          margin-left: -60px;
        }
        &:nth-child(3){
          left: 49.5%;
          margin-left: -63px;
        }
        &:nth-child(4){
          left: 74.5%;
          margin-left: -83px;
        }
        &:nth-child(5){
          right: 0;
          text-align: right;
        }
      }
      .discount{
        font-size:13px;
        color:rgba(255,255,255,1);
      }
    }
    .progress_bar{
      position: absolute;
      top: 14px;
      width: 100%;
      overflow: hidden;
      height: 6px;
      background: rgba(194,194,194,1);
      .dot{
        z-index: 5;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #878787;
        display: inline-block;
        position: absolute;
        
        &:nth-child(1){
          left: 25%;
        }
        &:nth-child(2){
          left: 50%;
        }
        &:nth-child(3){
          left: 75%;
        }
      }
      .active{
        background: #CBA200;
      }
    }
    .progress_fill{
      position: absolute;
      left: 0;
      top: 0;
      background: #FF0002;
      /* border-radius: 7px; */
      width: 40%;
      height: 6px;
      z-index: 1;
    }
  }
</style>
